<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>程序员简历 - 李小明</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            background: linear-gradient(135deg, #0f1c30 0%, #0a1525 100%);
            color: #e0e0e0;
            line-height: 1.6;
            overflow-x: hidden;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        header {
            background: linear-gradient(90deg, #0f2c52 0%, #0a1c35 100%);
            border-radius: 10px;
            padding: 30px;
            margin-bottom: 25px;
            border: 1px solid #1e3c5a;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .header-content {
            flex: 2;
        }
        
        .header-img {
            flex: 1;
            text-align: center;
        }
        
        .profile-img {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            object-fit: cover;
            border: 4px solid #4fc3f7;
            box-shadow: 0 0 20px rgba(79, 195, 247, 0.5);
        }
        
        h1 {
            font-size: 2.5rem;
            color: #4fc3f7;
            margin-bottom: 10px;
            text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
        }
        
        h2 {
            font-size: 1.8rem;
            color: #4fc3f7;
            margin: 25px 0 15px;
            padding-left: 15px;
            border-left: 4px solid #4fc3f7;
        }
        
        h3 {
            color: #4fc3f7;
            margin: 15px 0 10px;
        }
        
        .tagline {
            font-size: 1.2rem;
            color: #9e9e9e;
            margin-bottom: 15px;
        }
        
        .contact-info {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-top: 20px;
        }
        
        .contact-item {
            display: flex;
            align-items: center;
            background: rgba(26, 45, 67, 0.7);
            padding: 10px 15px;
            border-radius: 5px;
            border: 1px solid #1e3c5a;
        }
        
        .contact-item i {
            margin-right: 10px;
            color: #4fc3f7;
        }
        
        .main-content {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 25px;
        }
        
        .panel {
            background-color: rgba(16, 31, 50, 0.7);
            border-radius: 10px;
            padding: 25px;
            margin-bottom: 25px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            border: 1px solid #1e3c5a;
        }
        
        .panel-title {
            font-size: 1.4rem;
            margin-bottom: 20px;
            color: #4fc3f7;
            display: flex;
            align-items: center;
        }
        
        .panel-title i {
            margin-right: 10px;
        }
        
        .timeline {
            position: relative;
            margin-left: 10px;
        }
        
        .timeline-item {
            margin-bottom: 25px;
            padding-left: 30px;
            position: relative;
        }
        
        .timeline-item:before {
            content: '';
            position: absolute;
            left: 0;
            top: 8px;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #4fc3f7;
        }
        
        .timeline-item:after {
            content: '';
            position: absolute;
            left: 5px;
            top: 25px;
            width: 2px;
            height: calc(100% + 5px);
            background: #4fc3f7;
        }
        
        .timeline-item:last-child:after {
            display: none;
        }
        
        .date {
            color: #9e9e9e;
            font-size: 0.9rem;
            margin-bottom: 5px;
        }
        
        .skills-container {
            margin-bottom: 20px;
        }
        
        .skill {
            margin-bottom: 15px;
        }
        
        .skill-name {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
        }
        
        .skill-bar {
            height: 8px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 4px;
            overflow: hidden;
        }
        
        .skill-level {
            height: 100%;
            background: linear-gradient(90deg, #4fc3f7, #2196f3);
            border-radius: 4px;
        }
        
        .projects-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
        }
        
        .project-card {
            background: rgba(26, 45, 67, 0.7);
            border-radius: 8px;
            padding: 20px;
            border: 1px solid #1e3c5a;
            transition: transform 0.3s ease;
        }
        
        .project-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        }
        
        .project-card h3 {
            color: #4fc3f7;
            margin-bottom: 10px;
        }
        
        .tech-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 15px;
        }
        
        .tech-tag {
            background: rgba(79, 195, 247, 0.2);
            color: #4fc3f7;
            padding: 5px 10px;
            border-radius: 20px;
            font-size: 0.8rem;
        }
        
        footer {
            text-align: center;
            padding: 20px;
            margin-top: 30px;
            background: linear-gradient(90deg, #0f2c52 0%, #0a1c35 100%);
            border-radius: 10px;
            border: 1px solid #1e3c5a;
        }
        
        @media (max-width: 900px) {
            .main-content {
                grid-template-columns: 1fr;
            }
            
            header {
                flex-direction: column;
                text-align: center;
            }
            
            .header-content {
                margin-bottom: 20px;
            }
            
            .contact-info {
                justify-content: center;
            }
        }
        
        @media (max-width: 600px) {
            .projects-grid {
                grid-template-columns: 1fr;
            }
            
            .contact-info {
                flex-direction: column;
                align-items: center;
            }
            
            .contact-item {
                width: 100%;
                justify-content: center;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <div class="header-content">
                <h1>李小明</h1>
                <p class="tagline">全栈开发工程师 | 技术爱好者 | 问题解决者</p>
                <p>拥有5年全栈开发经验，专注于构建高效、可扩展的Web应用程序。热爱学习新技术和解决复杂问题。</p>
                
                <div class="contact-info">
                    <div class="contact-item">
                        <i class="fas fa-envelope"></i>
                        <span>liming@example.com</span>
                    </div>
                    <div class="contact-item">
                        <i class="fas fa-phone"></i>
                        <span>+86 138 8888 8888</span>
                    </div>
                    <div class="contact-item">
                        <i class="fas fa-map-marker-alt"></i>
                        <span>北京市海淀区</span>
                    </div>
                </div>
            </div>
            
            <div class="header-img">
                <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=300&q=80" alt="李小明" class="profile-img">
            </div>
        </header>
        
        <div class="main-content">
            <div class="left-column">
                <div class="panel">
                    <h2><i class="fas fa-briefcase"></i> 工作经验</h2>
                    
                    <div class="timeline">
                        <div class="timeline-item">
                            <div class="date">2020年 - 至今</div>
                            <h3>高级全栈开发工程师</h3>
                            <p>某互联网科技公司</p>
                            <ul>
                                <li>负责公司核心业务系统的设计与开发</li>
                                <li>主导微服务架构改造，提升系统可扩展性</li>
                                <li>优化数据库查询，将系统响应时间减少40%</li>
                                <li>带领5人团队完成多个重要项目交付</li>
                            </ul>
                        </div>
                        
                        <div class="timeline-item">
                            <div class="date">2018年 - 2020年</div>
                            <h3>前端开发工程师</h3>
                            <p>某软件公司</p>
                            <ul>
                                <li>参与企业级管理平台的前端开发</li>
                                <li>实现响应式设计，提升移动端用户体验</li>
                                <li>开发可复用组件库，提高团队开发效率30%</li>
                            </ul>
                        </div>
                    </div>
                </div>
                
                <div class="panel">
                    <h2><i class="fas fa-graduation-cap"></i> 教育背景</h2>
                    
                    <div class="timeline">
                        <div class="timeline-item">
                            <div class="date">2014年 - 2018年</div>
                            <h3>计算机科学与技术 学士学位</h3>
                            <p>清华大学</p>
                            <p>主修课程：数据结构、算法设计、操作系统、计算机网络、数据库系统</p>
                        </div>
                    </div>
                </div>
                
                <div class="panel">
                    <h2><i class="fas fa-code"></i> 项目经验</h2>
                    
                    <div class="projects-grid">
                        <div class="project-card">
                            <h3>电商平台重构项目</h3>
                            <p>使用Vue3+TypeScript重构前端，Node.js+Express重构后端，提升性能35%</p>
                            <div class="tech-tags">
                                <span class="tech-tag">Vue3</span>
                                <span class="tech-tag">TypeScript</span>
                                <span class="tech-tag">Node.js</span>
                            </div>
                        </div>
                        
                        <div class="project-card">
                            <h3>微服务权限管理系统</h3>
                            <p>基于Spring Cloud构建的分布式权限管理系统，支持千万级用户</p>
                            <div class="tech-tags">
                                <span class="tech-tag">Spring Cloud</span>
                                <span class="tech-tag">MySQL</span>
                                <span class="tech-tag">Redis</span>
                            </div>
                        </div>
                        
                        <div class="project-card">
                            <h3>健康监测移动应用</h3>
                            <p>React Native开发的跨平台应用，已上线App Store和Google Play</p>
                            <div class="tech-tags">
                                <span class="tech-tag">React Native</span>
                                <span class="tech-tag">Firebase</span>
                                <span class="tech-tag">Redux</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="right-column">
                <div class="panel">
                    <h2><i class="fas fa-star"></i> 技能专长</h2>
                    
                    <div class="skills-container">
                        <div class="skill">
                            <div class="skill-name">
                                <span>JavaScript/TypeScript</span>
                                <span>90%</span>
                            </div>
                            <div class="skill-bar">
                                <div class="skill-level" style="width: 90%;"></div>
                            </div>
                        </div>
                        
                        <div class="skill">
                            <div class="skill-name">
                                <span>Vue/React</span>
                                <span>85%</span>
                            </div>
                            <div class="skill-bar">
                                <div class="skill-level" style="width: 85%;"></div>
                            </div>
                        </div>
                        
                        <div class="skill">
                            <div class="skill-name">
                                <span>Node.js</span>
                                <span>80%</span>
                            </div>
                            <div class="skill-bar">
                                <div class="skill-level" style="width: 80%;"></div>
                            </div>
                        </div>
                        
                        <div class="skill">
                            <div class="skill-name">
                                <span>Java/Spring</span>
                                <span>75%</span>
                            </div>
                            <div class="skill-bar">
                                <div class="skill-level" style="width: 75%;"></div>
                            </div>
                        </div>
                        
                        <div class="skill">
                            <div class="skill-name">
                                <span>数据库设计</span>
                                <span>85%</span>
                            </div>
                            <div class="skill-bar">
                                <div class="skill-level" style="width: 85%;"></div>
                            </div>
                        </div>
                        
                        <div class="skill">
                            <div class="skill-name">
                                <span>DevOps</span>
                                <span>70%</span>
                            </div>
                            <div class="skill-bar">
                                <div class="skill-level" style="width: 70%;"></div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="panel">
                    <h2><i class="fas fa-certificate"></i> 证书</h2>
                    <ul>
                        <li>AWS认证解决方案架构师 (2021)</li>
                        <li>PMP项目管理专业人士 (2020)</li>
                        <li>前端性能优化专家 (2019)</li>
                    </ul>
                </div>
                
                <div class="panel">
                    <h2><i class="fas fa-language"></i> 语言能力</h2>
                    <ul>
                        <li>中文 - 母语</li>
                        <li>英语 - 流利 (TOEFL 105)</li>
                        <li>日语 - 日常交流 (N2)</li>
                    </ul>
                </div>
                
                <div class="panel">
                    <h2><i class="fas fa-heart"></i> 兴趣爱好</h2>
                    <ul>
                        <li>开源项目贡献</li>
                        <li>技术博客写作</li>
                        <li>摄影</li>
                        <li>徒步旅行</li>
                    </ul>
                </div>
            </div>
        </div>
        
        <footer>
            <p>© 2023 李小明 - 全栈开发工程师 | 最后更新: 2023年6月15日</p>
        </footer>
    </div>

    <script>
        // 简单的技能条动画效果
        document.addEventListener('DOMContentLoaded', function() {
            const skillBars = document.querySelectorAll('.skill-level');
            
            skillBars.forEach(bar => {
                const width = bar.style.width;
                bar.style.width = '0';
                
                setTimeout(() => {
                    bar.style.transition = 'width 1s ease-in-out';
                    bar.style.width = width;
                }, 500);
            });
        });
    </script>
</body>
</html>